<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../../../static/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../../static/js/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $(".click").click(function(){
  $(".tip").fadeIn(200);
  });
  
  $(".tiptop a").click(function(){
  $(".tip").fadeOut(200);
});

  $(".sure").click(function(){
  $(".tip").fadeOut(100);
});

  $(".cancel").click(function(){
  $(".tip").fadeOut(100);
});

});
</script>


</head>


<body>

	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">人事管理</a></li>
    <li><a href="#">部门管理</a></li>
    </ul>
    </div>
    
    <div class="rightinfo" id="app">

        <ul class="prosearch">
            <li>
                <label>查询：</label><i>部门名称</i>
                <a>
                    <input name="deptName" type="text" class="scinput" />
                </a>
            </li>
            <a>
                <input name="" type="button" class="sure" value="查询" @click="getDeptList()" />
            </a>
            <a>
                <input name="" type="button" class="sure" value="新增部门" onclick="toDeptAdd()" />
            </a>
        </ul>
      
   <div class="formtitle1"><span>部门列表</span></div>
   
    <table class="tablelist">
    	<thead>
    	<tr>
        <th>部门名称</th>
        <th>所属区域</th>
        <th>部门状态</th>
        <th>操作</th>
        </tr>
        </thead>
        
        <tbody>
        <tr v-for="one in messages">
        <td>{{one.deptName}}</td>
        <td>{{one.deptArea}}</td>
        <td>{{one.deptStatus==1?'无用':'可用'}}</td>
        <td>
            <a href="javascript:void 0;" class="tablelink toStaffInfo" onclick="toDeptInfo(this)">查看详情</a>
            <a href="javascript:void 0;" class="tablelink toUpdate" onclick="toUpdate(this)"> 修改</a>
            <a href="javascript:void 0;" class="tablelink click" id="deleteStaff" onclick="deleteDept(this)"> 删除</a>
        </td>
        </tr>
        </tbody>
    </table>

        <div class="pagin">
            <div class="message">共<i class="blue">{{pageModel.totalRows}}</i>条记录，当前显示第&nbsp;<i class="blue">{{pageModel.pageNum}}&nbsp;</i>页
            </div>
            <ul class="paginList">
                <li class="paginItem"><a href="javascript:;">
                    <span class="pagepre2 failure1" v-if="pageModel.firstPage" style="pointer-events:none;color:grey;"></span>
                    <span class="pagepre" @click="changePageNum(pageModel.pageNum-1)" v-else></span>
                </a></li>
                <li class="paginItem" v-for="num in pageModel.navigatepageNums">
                    <a href="javascript:;" v-if="pageModel.pageNum===num" class="failure2">{{num}}</a>
                    <a href="javascript:;" @click="changePageNum(num)" v-else>{{num}}</a>
                </li>
                <li class="paginItem"><a href="javascript:;">
                    <span class="pagenxt2" v-if="pageModel.lastPage" style="pointer-events:none;color:grey;"></span>
                    <span class="pagenxt" @click="changePageNum(pageModel.pageNum+1)" v-else ></span>
                </a></li>
            </ul>
        </div>
    
    </div>
    
    <script type="text/javascript">
	$('.tablelist tbody tr:odd').addClass('odd');
	</script>

</body>

</html>

<script type="text/javascript" src="../../../static/js/axios.min.js"></script>
<script type="text/javascript" src="../../../static/js/vue.js"></script>
<script type="text/javascript" src="../../../static/js/sysManage/deptManage/deptList.js"></script>


